<template>
  <div class="home">
    <out-line :height="height">
      <div id="map" :style="{ height: cHMap + 'px'}"></div>
    </out-line>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: 'Home',
  props: {
    height: {
      type: Number,
      default: 200
    },
    cHMap: {
      type: Number,
      default: 200
    },
  },
  data() {
    return {
      mymap: ''
    }
  },
  components: {},
  mounted() {
    this.mapInit();
  },
  methods: {
    // 初始加载底图
    mapInit() {
      lazyAMapApiLoaderInstance.load().then(() => {
        var map = new AMap.Map("map", {
          // center: [113.0340836, 35.9714627], 山西省八义村
          // https://bajiu.cn/ditu/?id=29
          expandZoomRange: true,
          zooms: [3, 60],
          zoom: 14, //8.35,
          // pitch: 35, // 地图俯仰角度，有效范围 0 度- 83 度
          // viewMode: '3D', // 地图模式
          mapStyle: "amap://styles/db027b434158ae048a7cb0a5b2e1872c", // "amap://styles/cf4bbeff185671422895aaff7434766a"
        });

        //main.js加载的模块 DistrictSearch

        // 添加 3D 罗盘控制
        // AMap.plugin(['AMap.ControlBar'], () => {
        //   map.addControl(new AMap.ControlBar({
        //     position: {
        //       right: '200px',
        //       top: '20px'
        //     },
        //     showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
        //   }));
        // });

      });
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  #map {
    width: 100%;
    // height: 937px;
  }
}
</style>

